<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Controller | NES Vue</title>
    <meta name="description" content="NES Vue documents">
    <meta name="generator" content="VitePress v1.0.0-rc.44">
    <link rel="preload stylesheet" href="/nes-vue-docs/assets/style._HeIGs6L.css" as="style">
    
    <script type="module" src="/nes-vue-docs/assets/app.C0hTyZD8.js"></script>
    <link rel="preload" href="/nes-vue-docs/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/nes-vue-docs/assets/chunks/framework.C5inrWFI.js">
    <link rel="modulepreload" href="/nes-vue-docs/assets/chunks/theme.BlNTesf4.js">
    <link rel="modulepreload" href="/nes-vue-docs/assets/guide_controller.md.DqXmxsox.lean.js">
    <link rel="icon" href="/nes-vue-docs/favicon-32x32.png">
    <link rel="icon" href="/nes-vue-docs/favicon-16x16.png">
    <link rel="apple-touch-icon" href="/nes-vue-docs/apple-touch-icon.png">
    <link rel="manifest" href="/nes-vue-docs/site.webmanifest">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-bf87cd52><!--[--><!--]--><!--[--><span tabindex="-1" data-v-dd2a0346></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-dd2a0346> Skip to content </a><!--]--><!----><header class="VPNav" data-v-bf87cd52 data-v-ceca27d4><div class="VPNavBar has-sidebar" data-v-ceca27d4 data-v-a4e42996><div class="wrapper" data-v-a4e42996><div class="container" data-v-a4e42996><div class="title" data-v-a4e42996><div class="VPNavBarTitle has-sidebar" data-v-a4e42996 data-v-90809d62><a class="title" href="/nes-vue-docs/" data-v-90809d62><!--[--><!--]--><!--[--><img class="VPImage logo" src="/nes-vue-docs/nes-vue.svg" alt data-v-fdc0db77><!--]--><span data-v-90809d62>NES Vue</span><!--[--><!--]--></a></div></div><div class="content" data-v-a4e42996><div class="content-body" data-v-a4e42996><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a4e42996><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a4e42996 data-v-6a03ef42><span id="main-nav-aria-label" class="visually-hidden" data-v-6a03ef42>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/nes-vue-docs/" tabindex="0" data-v-6a03ef42 data-v-35286554><!--[--><span data-v-35286554>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/nes-vue-docs/guide/getting-started.html" tabindex="0" data-v-6a03ef42 data-v-35286554><!--[--><span data-v-35286554>API</span><!--]--></a><!--]--><!--]--></nav><div class="VPFlyout VPNavBarTranslations translations" data-v-a4e42996 data-v-34c4d512 data-v-a4b0062b><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="Change language" data-v-a4b0062b><span class="text" data-v-a4b0062b><span class="vpi-languages option-icon" data-v-a4b0062b></span><!----><span class="vpi-chevron-down text-icon" data-v-a4b0062b></span></span></button><div class="menu" data-v-a4b0062b><div class="VPMenu" data-v-a4b0062b data-v-8b09b3ad><!----><!--[--><!--[--><div class="items" data-v-34c4d512><p class="title" data-v-34c4d512>English</p><!--[--><div class="VPMenuLink" data-v-34c4d512 data-v-4045af9d><a class="VPLink link" href="/nes-vue-docs/zh/guide/controller.html" data-v-4045af9d><!--[-->简体中文<!--]--></a></div><!--]--></div><!--]--><!--]--></div></div></div><div class="VPNavBarAppearance appearance" data-v-a4e42996 data-v-b9326fed><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-b9326fed data-v-63d56946 data-v-5aa7a49b><span class="check" data-v-5aa7a49b><span class="icon" data-v-5aa7a49b><!--[--><span class="vpi-sun sun" data-v-63d56946></span><span class="vpi-moon moon" data-v-63d56946></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a4e42996 data-v-621b213c data-v-2ba99e91><!--[--><a class="VPSocialLink no-icon" href="https://github.com/taiyuuki/nes-vue" aria-label="github" target="_blank" rel="noopener" data-v-2ba99e91 data-v-235b8a9b><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://gitee.com/taiyuuki/nes-vue" aria-label target="_blank" rel="noopener" data-v-2ba99e91 data-v-235b8a9b><svg xmlns="http://www.w3.org/2000/svg" name="zi_tmGitee" viewBox="0 0 2000 2000">
<path fill="currentColor"
    d="M898 1992q183 0 344-69.5t283-191.5q122-122 191.5-283t69.5-344q0-183-69.5-344T1525 477q-122-122-283-191.5T898 216q-184 0-345 69.5T270 477Q148 599 78.5 760T9 1104q0 183 69.5 344T270 1731q122 122 283 191.5t345 69.5zm199-400H448q-17 0-30.5-14t-13.5-30V932q0-89 43.5-163.5T565 649q74-45 166-45h616q17 0 30.5 14t13.5 31v111q0 16-13.5 30t-30.5 14H731q-54 0-93.5 39.5T598 937v422q0 17 14 30.5t30 13.5h416q55 0 94.5-39.5t39.5-93.5v-22q0-17-14-30.5t-31-13.5H842q-17 0-30.5-14t-13.5-31v-111q0-16 13.5-30t30.5-14h505q17 0 30.5 14t13.5 30v250q0 121-86.5 207.5T1097 1592z" />
</svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a4e42996 data-v-728d94e3 data-v-a4b0062b><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-a4b0062b><span class="vpi-more-horizontal icon" data-v-a4b0062b></span></button><div class="menu" data-v-a4b0062b><div class="VPMenu" data-v-a4b0062b data-v-8b09b3ad><!----><!--[--><!--[--><div class="group translations" data-v-728d94e3><p class="trans-title" data-v-728d94e3>English</p><!--[--><div class="VPMenuLink" data-v-728d94e3 data-v-4045af9d><a class="VPLink link" href="/nes-vue-docs/zh/guide/controller.html" data-v-4045af9d><!--[-->简体中文<!--]--></a></div><!--]--></div><div class="group" data-v-728d94e3><div class="item appearance" data-v-728d94e3><p class="label" data-v-728d94e3>Appearance</p><div class="appearance-action" data-v-728d94e3><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-728d94e3 data-v-63d56946 data-v-5aa7a49b><span class="check" data-v-5aa7a49b><span class="icon" data-v-5aa7a49b><!--[--><span class="vpi-sun sun" data-v-63d56946></span><span class="vpi-moon moon" data-v-63d56946></span><!--]--></span></span></button></div></div></div><div class="group" data-v-728d94e3><div class="item social-links" data-v-728d94e3><div class="VPSocialLinks social-links-list" data-v-728d94e3 data-v-2ba99e91><!--[--><a class="VPSocialLink no-icon" href="https://github.com/taiyuuki/nes-vue" aria-label="github" target="_blank" rel="noopener" data-v-2ba99e91 data-v-235b8a9b><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://gitee.com/taiyuuki/nes-vue" aria-label target="_blank" rel="noopener" data-v-2ba99e91 data-v-235b8a9b><svg xmlns="http://www.w3.org/2000/svg" name="zi_tmGitee" viewBox="0 0 2000 2000">
<path fill="currentColor"
    d="M898 1992q183 0 344-69.5t283-191.5q122-122 191.5-283t69.5-344q0-183-69.5-344T1525 477q-122-122-283-191.5T898 216q-184 0-345 69.5T270 477Q148 599 78.5 760T9 1104q0 183 69.5 344T270 1731q122 122 283 191.5t345 69.5zm199-400H448q-17 0-30.5-14t-13.5-30V932q0-89 43.5-163.5T565 649q74-45 166-45h616q17 0 30.5 14t13.5 31v111q0 16-13.5 30t-30.5 14H731q-54 0-93.5 39.5T598 937v422q0 17 14 30.5t30 13.5h416q55 0 94.5-39.5t39.5-93.5v-22q0-17-14-30.5t-31-13.5H842q-17 0-30.5-14t-13.5-31v-111q0-16 13.5-30t30.5-14h505q17 0 30.5 14t13.5 30v250q0 121-86.5 207.5T1097 1592z" />
</svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a4e42996 data-v-5c02fb6f><span class="container" data-v-5c02fb6f><span class="top" data-v-5c02fb6f></span><span class="middle" data-v-5c02fb6f></span><span class="bottom" data-v-5c02fb6f></span></span></button></div></div></div></div><div class="divider" data-v-a4e42996><div class="divider-line" data-v-a4e42996></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-bf87cd52 data-v-1f43edba><div class="container" data-v-1f43edba><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-1f43edba><span class="vpi-align-left menu-icon" data-v-1f43edba></span><span class="menu-text" data-v-1f43edba>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-1f43edba data-v-87c663ed><button data-v-87c663ed>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-bf87cd52 data-v-361f3df3><div class="curtain" data-v-361f3df3></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-361f3df3><span class="visually-hidden" id="sidebar-aria-label" data-v-361f3df3> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-361f3df3><section class="VPSidebarItem level-0 has-active" data-v-361f3df3 data-v-c050ee47><div class="item" role="button" tabindex="0" data-v-c050ee47><div class="indicator" data-v-c050ee47></div><h2 class="text" data-v-c050ee47>Guide</h2><!----></div><div class="items" data-v-c050ee47><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c050ee47 data-v-c050ee47><div class="item" data-v-c050ee47><div class="indicator" data-v-c050ee47></div><a class="VPLink link link" href="/nes-vue-docs/guide/getting-started.html" data-v-c050ee47><!--[--><p class="text" data-v-c050ee47>Getting Started</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c050ee47 data-v-c050ee47><div class="item" data-v-c050ee47><div class="indicator" data-v-c050ee47></div><a class="VPLink link link" href="/nes-vue-docs/guide/props.html" data-v-c050ee47><!--[--><p class="text" data-v-c050ee47>Props</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c050ee47 data-v-c050ee47><div class="item" data-v-c050ee47><div class="indicator" data-v-c050ee47></div><a class="VPLink link link" href="/nes-vue-docs/guide/controller.html" data-v-c050ee47><!--[--><p class="text" data-v-c050ee47>Controller</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c050ee47 data-v-c050ee47><div class="item" data-v-c050ee47><div class="indicator" data-v-c050ee47></div><a class="VPLink link link" href="/nes-vue-docs/guide/directives.html" data-v-c050ee47><!--[--><p class="text" data-v-c050ee47>Directives</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c050ee47 data-v-c050ee47><div class="item" data-v-c050ee47><div class="indicator" data-v-c050ee47></div><a class="VPLink link link" href="/nes-vue-docs/guide/events.html" data-v-c050ee47><!--[--><p class="text" data-v-c050ee47>Events</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c050ee47 data-v-c050ee47><div class="item" data-v-c050ee47><div class="indicator" data-v-c050ee47></div><a class="VPLink link link" href="/nes-vue-docs/guide/methods.html" data-v-c050ee47><!--[--><p class="text" data-v-c050ee47>Methods</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c050ee47 data-v-c050ee47><div class="item" data-v-c050ee47><div class="indicator" data-v-c050ee47></div><a class="VPLink link link" href="/nes-vue-docs/guide/replay.html" data-v-c050ee47><!--[--><p class="text" data-v-c050ee47>TAS Video</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c050ee47 data-v-c050ee47><div class="item" data-v-c050ee47><div class="indicator" data-v-c050ee47></div><a class="VPLink link link" href="/nes-vue-docs/guide/cheat.html" data-v-c050ee47><!--[--><p class="text" data-v-c050ee47>Cheat Code</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-bf87cd52 data-v-0d5877cf><div class="VPDoc has-sidebar has-aside" data-v-0d5877cf data-v-f4a1e7c7><!--[--><!--]--><div class="container" data-v-f4a1e7c7><div class="aside" data-v-f4a1e7c7><div class="aside-curtain" data-v-f4a1e7c7></div><div class="aside-container" data-v-f4a1e7c7><div class="aside-content" data-v-f4a1e7c7><div class="VPDocAside" data-v-f4a1e7c7 data-v-3b6e27e5><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3b6e27e5 data-v-f0ede291><div class="content" data-v-f0ede291><div class="outline-marker" data-v-f0ede291></div><div class="outline-title" role="heading" aria-level="2" data-v-f0ede291>Outline</div><nav aria-labelledby="doc-outline-aria-label" data-v-f0ede291><span class="visually-hidden" id="doc-outline-aria-label" data-v-f0ede291> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-f0ede291 data-v-c4436e37><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3b6e27e5></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-f4a1e7c7><div class="content-container" data-v-f4a1e7c7><!--[--><!--]--><main class="main" data-v-f4a1e7c7><div style="position:relative;" class="vp-doc _nes-vue-docs_guide_controller" data-v-f4a1e7c7><div><h1 id="controller" tabindex="-1">Controller <a class="header-anchor" href="#controller" aria-label="Permalink to &quot;Controller&quot;">​</a></h1><p><code>p1</code> and <code>p2</code> properties can customize controller&#39;s corresponding keyboard key values as follows:</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes light-plus github-dark vp-code"><code><span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">p1</span><span style="--shiki-light:#000000;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">    UP:</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;KeyW&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">    DOWN:</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;KeyS&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">    LEFT:</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;KeyA&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">    RIGHT:</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;KeyD&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">    A:</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;KeyK&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">    B:</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;KeyJ&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">    C:</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;KeyI&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">    D:</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;KeyU&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">    SELECT:</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;Digit2&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">    START:</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;Digit1&#39;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">p2</span><span style="--shiki-light:#000000;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">    UP:</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;ArrowUp&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">    DOWN:</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;ArrowDown&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">    LEFT:</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;ArrowLeft&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">    RIGHT:</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;ArrowRight&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">    A:</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;Numpad2&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">    B:</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;Numpad1&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">    C:</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;Numpad5&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">    D:</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;Numpad4&#39;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>The values are <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code" target="_blank" rel="noreferrer">KeyboardEvent.code</a>, Each field is optional, and if a field is missing, the default value will be used.</p><h2 id="control-the-game-in-other-ways" tabindex="-1">Control the game in other ways <a class="header-anchor" href="#control-the-game-in-other-ways" aria-label="Permalink to &quot;Control the game in other ways&quot;">​</a></h2><p>Strongly recommended to use <a href="/nes-vue-docs/zh/guide/directives.html#v-gamepad">v-gamepad</a> directive, which can bind any HTML element to game controller.</p><p>Otherwise, you can manually trigger <code>document</code>&#39;s <code>keydown</code> and <code>keyup</code> events to control the game, but it is recommended to do this when <code>v-gamepad</code> cannot satisfy your needs, here is an example:</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes light-plus github-dark vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#E50000;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">NesVue</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#AF00DB;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;nes-vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#795E26;--shiki-dark:#B392F0;"> move</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">() {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">  document</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#B392F0;">dispatchEvent</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#0000FF;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#795E26;--shiki-dark:#B392F0;"> KeyboardEvent</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;">&#39;keydown&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">, { </span><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">code:</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;KeyD&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;"> }))</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"><span style="--shiki-light:#0000FF;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#795E26;--shiki-dark:#B392F0;"> stop</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">() {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">  document</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#795E26;--shiki-dark:#B392F0;">dispatchEvent</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#0000FF;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#795E26;--shiki-dark:#B392F0;"> KeyboardEvent</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;">&#39;keyup&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">, { </span><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">code:</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;KeyD&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;"> }))</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#85E89D;">nes-vue</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#B392F0;">    url</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#9ECBFF;">&quot;https://taiyuuki.github.io/nes-vue/Super Mario Bros (JU).nes&quot;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">  /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#E50000;--shiki-dark:#B392F0;">touchstart</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#000000;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">move</span><span style="--shiki-light:#000000;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#E50000;--shiki-dark:#B392F0;">touchend</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#000000;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">stop</span><span style="--shiki-light:#000000;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">RIGHT</span><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>Touching the <code>button</code> element will triggers the game controller&#39;s <code>RIGHT</code> button.</p><p>Using <code>v-gamepad</code> directive can achieve the same effect, and the performance is relatively better:</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes light-plus github-dark vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#E50000;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#AF00DB;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">NesVue</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#001080;--shiki-dark:#E1E4E8;">vGamepad</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#AF00DB;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;"> &#39;nes-vue&#39;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#85E89D;">nes-vue</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#B392F0;">    url</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#9ECBFF;">&quot;https://taiyuuki.github.io/nes-vue/Super Mario Bros (JU).nes&quot;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">  /&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#E50000;--shiki-dark:#B392F0;"> v-gamepad</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#000000;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#A31515;--shiki-dark:#9ECBFF;">&#39;RIGHT&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#E1E4E8;">RIGHT</span><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#800000;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>Detailed usage please refer to <a href="/nes-vue-docs/guide/directives.html#v-gamepad">v-gamepad</a>.</p><h2 id="gamepad" tabindex="-1">Gamepad <a class="header-anchor" href="#gamepad" aria-label="Permalink to &quot;Gamepad&quot;">​</a></h2><p>The component has built-in support for the gamepad, which does not require additional configuration.</p></div></div></main><footer class="VPDocFooter" data-v-f4a1e7c7 data-v-d2cb474a><!--[--><!--]--><!----><nav class="prev-next" data-v-d2cb474a><div class="pager" data-v-d2cb474a><a class="VPLink link pager-link prev" href="/nes-vue-docs/guide/props.html" data-v-d2cb474a><!--[--><span class="desc" data-v-d2cb474a>Previous page</span><span class="title" data-v-d2cb474a>Props</span><!--]--></a></div><div class="pager" data-v-d2cb474a><a class="VPLink link pager-link next" href="/nes-vue-docs/guide/directives.html" data-v-d2cb474a><!--[--><span class="desc" data-v-d2cb474a>Next page</span><span class="title" data-v-d2cb474a>Directives</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-bf87cd52 data-v-ab64cfd3><div class="container" data-v-ab64cfd3><p class="message" data-v-ab64cfd3>Released under the MIT License.</p><p class="copyright" data-v-ab64cfd3>Copyright © 2023-2024 Taiyuuki</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"zh_guide_directives.md\":\"CL6xbLEG\",\"zh_guide_events.md\":\"RA5AZhxz\",\"zh_guide_props.md\":\"CuSjNKeI\",\"zh_index.md\":\"B5S3gt-n\",\"zh_guide_controller.md\":\"rDh_Psa7\",\"guide_directives.md\":\"DzEn9GsF\",\"guide_controller.md\":\"DqXmxsox\",\"index.md\":\"TIvAVPbN\",\"guide_getting-started.md\":\"D7k6WEuX\",\"zh_guide_cheat.md\":\"CwqJkQVQ\",\"guide_events.md\":\"BybKOCzf\",\"guide_replay.md\":\"DjJ1uhwq\",\"zh_guide_replay.md\":\"BDeb48az\",\"guide_props.md\":\"F2aw2XSO\",\"zh_guide_getting-started.md\":\"fp5mfMNE\",\"guide_cheat.md\":\"_dMnCBd4\",\"zh_guide_methods.md\":\"wJr_jWFQ\",\"guide_methods.md\":\"FDRXj6iR\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"NES Vue\",\"description\":\"NES Vue documents\",\"base\":\"/nes-vue-docs/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/nes-vue.svg\",\"outline\":{\"level\":[2,3]},\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2023-2024 Taiyuuki\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/taiyuuki/nes-vue\"},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" name=\\\"zi_tmGitee\\\" viewBox=\\\"0 0 2000 2000\\\">\\n<path fill=\\\"currentColor\\\"\\n    d=\\\"M898 1992q183 0 344-69.5t283-191.5q122-122 191.5-283t69.5-344q0-183-69.5-344T1525 477q-122-122-283-191.5T898 216q-184 0-345 69.5T270 477Q148 599 78.5 760T9 1104q0 183 69.5 344T270 1731q122 122 283 191.5t345 69.5zm199-400H448q-17 0-30.5-14t-13.5-30V932q0-89 43.5-163.5T565 649q74-45 166-45h616q17 0 30.5 14t13.5 31v111q0 16-13.5 30t-30.5 14H731q-54 0-93.5 39.5T598 937v422q0 17 14 30.5t30 13.5h416q55 0 94.5-39.5t39.5-93.5v-22q0-17-14-30.5t-31-13.5H842q-17 0-30.5-14t-13.5-31v-111q0-16 13.5-30t30.5-14h505q17 0 30.5 14t13.5 30v250q0 121-86.5 207.5T1097 1592z\\\" />\\n</svg>\"},\"link\":\"https://gitee.com/taiyuuki/nes-vue\"}],\"search\":{\"provider\":\"local\"}},\"locales\":{\"root\":{\"label\":\"English\",\"lang\":\"en\",\"themeConfig\":{\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"API\",\"link\":\"/guide/getting-started\"}],\"sidebar\":[{\"text\":\"Guide\",\"items\":[{\"text\":\"Getting Started\",\"link\":\"/guide/getting-started\"},{\"text\":\"Props\",\"link\":\"/guide/props\"},{\"text\":\"Controller\",\"link\":\"/guide/controller\"},{\"text\":\"Directives\",\"link\":\"/guide/directives\"},{\"text\":\"Events\",\"link\":\"/guide/events\"},{\"text\":\"Methods\",\"link\":\"/guide/methods\"},{\"text\":\"TAS Video\",\"link\":\"/guide/replay\"},{\"text\":\"Cheat Code\",\"link\":\"/guide/cheat\"}]}],\"outlineTitle\":\"Outline\"}},\"zh\":{\"label\":\"简体中文\",\"lang\":\"zh-CN\",\"themeConfig\":{\"nav\":[{\"text\":\"主页\",\"link\":\"/zh/index\"},{\"text\":\"API\",\"link\":\"/zh/guide/getting-started\"}],\"sidebar\":[{\"text\":\"指南\",\"items\":[{\"text\":\"开始使用\",\"link\":\"/zh/guide/getting-started\"},{\"text\":\"属性\",\"link\":\"/zh/guide/props\"},{\"text\":\"控制器\",\"link\":\"/zh/guide/controller\"},{\"text\":\"指令\",\"link\":\"/zh/guide/directives\"},{\"text\":\"事件\",\"link\":\"/zh/guide/events\"},{\"text\":\"方法\",\"link\":\"/zh/guide/methods\"},{\"text\":\"播放录像\",\"link\":\"/zh/guide/replay\"},{\"text\":\"金手指\",\"link\":\"/zh/guide/cheat\"}]}],\"outlineTitle\":\"目录\"}}},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>